<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>家园调查</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">
    <link rel="stylesheet" href="../../style/investigation/investigation.css">

    <script src="../../libs/vue.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="../../jsc/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <script src="../../libs/node_modules/echarts/dist/echarts.js"></script>
    <!--<script src="js/system.js"></script>-->
</head>
<body>

<main id="survey" v-cloak>
    <header-component></header-component>
    <navsearch-component></navsearch-component>

	<!-- 主站导航 -->
	<navrow-component v-if="sitelevel == ''"></navrow-component>
	<!-- 行政站导航 -->
	<navtab2-component v-if="sitelevel != 5 && sitelevel != '' " v-if="site_data && site_data.site_id" :siteid="site_data"></navtab2-component>
	<!-- 基层站导航 -->
	<navtab3-component v-if="sitelevel==5" v-if="site_data && site_data.site_id" :siteid="site_data"></navtab3-component>

    <subpagebanner-component :siteid="site_data" bannerid="136"></subpagebanner-component>

    <div class="content">
        <div class="article-detail">
            <div class="article-detail-l" style="width: 15rem">
                <div class="nav flex-column nav-pills" id="v-pills-tab">
                    <a class="nav-link" :class="{'active' : tabIndex == 1 }" @click="toggleTab(1)" id="v-pills-focus-tab" href="#1">历史互动活动</a>
                    <a class="nav-link" :class="{'active' : tabIndex == 4 }" @click="toggleTab(4)" id="v-pills-vote2-tab" href="#4">当前互动活动</a>
                    <a class="nav-link" :class="{'active' : tabIndex == 3 }" @click="toggleTab(3)" id="v-pills-investigation-tab" href="#3" >互动活动评议</a>
                    <a class="nav-link" :class="{'active' : tabIndex == 2 }" @click="toggleTab(2)" id="v-pills-vote-tab" href="#2">互动活动决定</a>
                    <a class="nav-link" :class="{'active' : tabIndex == 5 }" @click="toggleTab(5)" id="v-pills-complaint-tab" href="#5">互动活动征集</a>
                </div>
            </div>
            <div class="tab-content" id="v-pills-tabContent">
                <!-- 焦点 -->
                <div v-show="tabIndex == 1" class="article-detail-r" style="width: 58rem">
<!--                    <focus-component  v-if="site_data && site_data.site_id" :siteid="site_data"></focus-component>-->
                    <div class="article">
                        <div class="article-box" v-if="show == 1">
                            <div class="article-header">
                                <div class="article-header-inner">
                                    <div class="article-logo"></div>
                                    <div class="article-tip">历史互动活动</div>
                                </div>
                                <div class="article-hot">HOT</div>
                            </div>
                            <div class="article-list">
                                <a class="article-list-item" v-for="(item,index) in articleList" @click="getArticleDetail(item)">
                                    <div class="article-item-img" :style="{'background-image' : 'url(' + item.coverimages_text[0] +')'}"></div>
                                    <div class="article-item-content" style="width: 46rem">
                                        <div class="article-item-title">{{item.title}}</div>
                                        <div class="article-item-prop">
                                            <span v-if="item.author">{{item.resource}}</span>
                                            <span v-if="item.publishtime_text">发布于：{{item.publishtime_text}}</span>
                                            <span v-if="item.comment">评论：{{item.comment}}</span>
                                        </div>
                                        <div class="article-item-text">{{item.postcontent | textFilter}}</div>
                                    </div>
                                </a>
                            </div>
                            <v-pagination v-if="total" :total="total" :display="limit" :currentPage="page" @pagechange="togglePageArticle"></v-pagination>
                        </div>
                        <articledetail v-if="tabIndex == 1 && show == 2" :defaultid="articleDetail.id" defaultname="历史互动活动"></articledetail>
                    </div>
                </div>
                <!-- 投票 -->
                <div v-if="tabIndex == 2 || tabIndex == 3 || tabIndex == 4 || tabIndex == 5" class="vote-detail-r">
                    <div class="vote">
                        <div class="vote-item" v-for="(item,index) in voteList" v-if="show == 1">
                            <div class="vote-item-title">
                                <div class="vote-item-name">{{item.title}}</div>
                                <div class="vote-item-prop">截止时间：{{item.endtime_text}}</div>
                            </div>
                            <div class="vote-item-option">
                                <a v-if="tabIndex == 5" :data-id="item.id" @click="goToVote(item)">查看详情</a>
                                <a :class="{ 'active' : item.deliberate }" v-else @click="goToVote(item)" >{{ item.deliberate ? '已投票' : '去投票' }}</a>
                            </div>
                        </div>

                        <v-pagination v-if="show == 1 && total" :total="total" :display="limit" :currentPage="page" :pagegroup="pagegroup" @pagechange="togglePage"></v-pagination>

                        <div class="campaign-detail-r" v-if="show == 2">
                            <runfor-component v-if="nowItem && nowItem.typedata == 1" :siteid="site_data" :vite="nowItem" @userinfo="getUserInfo"></runfor-component>

                            <activity-component v-if="nowItem && nowItem.typedata == 3" :siteid="site_data" :vite="nowItem" ></activity-component>

                            <discuss-component v-if="nowItem && nowItem.typedata == 2" :siteid="site_data" :vite="nowItem"></discuss-component>

                            <collect-component v-if="nowItem && nowItem.id && tabIndex == 5 " :siteid="site_data" :vite="nowItem"></collect-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <userdate-component v-if="userinfo" :userinfo="userinfo"></userdate-component>
    </div>

    <footer-component></footer-component>
</main>

<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>


<script>
    var hash = window.location.hash.substring(1);
    var site = parameter.siteid ? { site_id : parseInt(parameter.siteid) , name : decodeURI(parameter.sitename) } : ( JSON.parse(window.localStorage.getItem("station")) || {});
	var hash;
    var survey = new Vue({
        el:"#survey",
        data    : {
            token     : getCookie("token") ,       // 用户token
            user_id   : getCookie("user_id") ,   // 用户id
            parameter : parameter ,

            weburl    : weburl ,         // 基础路径
            site_data : site ,           // 站点数据
            tabIndex  : hash || 1 ,           // 当前显示页面
            voteList  : [] ,                // 投票数据列表
            articleList : [] ,                // 文章数据列表
            articleDetail:{},
            pagegroup : 0 ,
            total     : 0 ,
            limit     : 10 ,
            page      : 1 ,
            userinfo  : "" ,                   // 用户信息
            show      : 1 ,                        // 投票显示页面
            showPage  : 1 ,                    // 投票页面 1 ：投票列表页 2 ：投票详情页 3 ：
			sitelevel : '',
        } ,
        mounted(){
            this.toggleTab(this.tabIndex);
			if (localStorage.getItem('station')){
				this.sitelevel = JSON.parse(localStorage.getItem('station')).site_level;
			}

            if(this.parameter.id){
                if(this.parameter.type == 'article'){
                    this.articleDetail.id = this.parameter.id;
                    this.show = 2;
                }else{
                    this.getLookDetail(1);
                }
            }
        } ,
        filters:{
            // 过滤中文
            textFilter(txt){
                var str;
                str = txt.match(regHtml,"");
                return str.join("");
            }
        },
        methods : {
            // 获取文章列表
            getArticleList(){
                if( this.page == 1 ){
                    this.articleList = [];
                };
                axios.post(sysurl + 'article/areaArticleList' , {
                    site_id:this.site_data.site_id || 0,
                    category_id:76,
                    limit : this.limit ,
                    page  : this.page
                }).then(res => {
                    var datas = res.data;
                    if( datas.code === 1 ){
                        this.articleList = datas.data.data;
                        if( datas.data.current_page == 1 && datas.data.total > 0 ){
                            this.total     = datas.data.total;
                            this.pagegroup = datas.data.last_page;
                        }
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            } ,
            // 分页
            togglePageArticle( page ){
                this.page = page || this.page;
                this.getArticleList();
            },
            // 切换tab
            toggleTab(index){
                this.show = 1;
                this.total = 0;
                this.tabIndex = index;
                if(this.tabIndex == 1){
                    this.getArticleList();
                }
                if(this.tabIndex == 2 || this.tabIndex == 3 || this.tabIndex == 4 || this.tabIndex == 5){
                    if(this.parameter.siteid && this.tabIndex != hash){
                        var href = window.location.href;
                        window.location.href = href.replace(/\?.*/ , "?siteid=" + this.parameter.siteid + "#" + this.tabIndex)
                    }
                    this.togglePage();
                }
            },
            // 切换分页
            togglePage(page){
                var url = "";
                var data = {};

                //if(!this.site_data || !this.site_data.site_id){
                //    layer.msg("无法获取站点信息，请选择站点后操作");
                //}

                this.page = page || this.page;
                if(this.tabIndex == 5){                 // 征集数据列表
                    url = "vote/collect";
                    data = transFormData({
                        site_id : this.site_data.site_id || 0,
                        limit   : this.limit ,
                        page    : this.page
                    })
                }else{                                  // 投票数据列表   类型：1=选举，2=评议,3=活动
                    url = "vote/voteList";
                    data = transFormData({
                        user_id : this.user_id ,
                        token   : this.token ,
                        site_id : this.site_data.site_id || 0,
                        type    : this.tabIndex - 1 ,
                        limit   : this.limit ,
                        page    : this.page
                    });
                }
                this.getVoteList(url,data);
            },
            // 获取文章详情
            getArticleDetail(data){
                this.show = 2;
                this.articleDetail = data;
            },
            // 获取投票列表
            getVoteList(url,data){
                axios.post(sysurl + url , data).then(res => {
                    var datas = res.data;
                    if( datas.code === 1 ){
                        this.voteList = datas.data.data;

                        if( datas.data.current_page == 1 && datas.data.total > 0 ){
                            this.total = datas.data.total;
                            this.pagegroup = datas.data.last_page;
                        }
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            //查看投票详情
            goToVote(vite){
                this.show = 2;
                this.nowItem = vite;
            },
            // 获取用户信息
            getUserInfo(info){
                this.userinfo = info;
            },
            // 查看文章详情
            getLookArticleDetail(){

            },
            getLookDetail(page){
                var url = "";
                var data = {};

                if(this.tabIndex == 5){                 // 征集数据列表
                    url = "vote/collect";
                    data = transFormData({
                        site_id : this.site_data.site_id || 0,
                        limit   : 20 ,
                        page    : page
                    })
                }else{                                  // 投票数据列表   类型：1=选举，2=评议,3=活动
                    url = "vote/voteList";
                    data = transFormData({
                        user_id : this.user_id ,
                        token   : this.token ,
                        site_id : this.site_data.site_id || 0,
                        type    : this.tabIndex - 1 ,
                        limit   : 20 ,
                        page    : page
                    });
                }

                axios.post(sysurl + url , data).then(res => {
                    var datas = res.data;
                    if( datas.code === 1 ){
                        datas.data.data.map((item,index)=>{
                            if(item.id == this.parameter.id){
                                this.goToVote(item);
                            }else{
                                page++;
                                this.getLookDetail(page)
                            }
                        })
                    }else{
                        layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            }
        }
    })
</script>
</body>
</html>
